<script setup lang="ts">
import { ref } from 'vue'
const testDate = ref('')
const submit = () => {
  console.log(testDate.value)
}
</script>
<template>
  <div class="about">
    <!-- <h1>This is an about page</h1>
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
    <i class="pi pi-check"></i> -->
    <!-- <InputText placeholder="Overriden" class="p-1 bg-primary" /> -->
    <div class="flex flex-col gap-1 w-full sm:w-auto">
      <div class="flex flex-col sm:flex-row sm:items-center gap-6">
        <div class="flex-auto">
          <label for="firstname" class="font-mono mb-2">Firstname</label>
          <InputText id="firstname" class="w-full" />
        </div>
        <div class="flex-auto">
          <label for="lastname" class="block font-mono mb-2">Lastname</label>
          <InputText id="lastname" class="w-full" />
        </div>
      </div>
      <div class="flex flex-col sm:flex-row sm:items-center gap-6">
        <div class="flex-1">
          <label for="date" class="block font-mono mb-2">Date</label>
          <Panel
          <DatePicker
            v-model="testDate"
            dateFormat="yy-mm-dd"
            showTime
            showSeconds
            inputId="date"
            class="w-full"
            
          />
        </div>
      </div>
      <div class="flex-auto">
        <label for="message" class="block font-mono mb-2">Message</label>
        <Textarea id="message" class="w-full" rows="4" />
      </div>
    </div>
    <Button label="Submit" @click="submit" />
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
